<template>
  <div class="blog-management-wrapper">
    <List>
      <ListItem v-for="blog in blogList.data" :key="blog.id">
        <ListItemMeta :title="blog.title" :description="contentCut(blog.content)">
          <template slot="title">
            <h3>{{blog.title}}</h3>
          </template>
          <template slot="avatar">
            <img :src="blog.cover" style="width: 100px" />
          </template>
          <template slot="description">
            {{contentCut(blog.content)}}
            <br />
            {{blog.post_time}}
          </template>
        </ListItemMeta>
        <template slot="action">
          <!-- <li>
            <a
              :href="'blog_comments?id='+blog.id"
              :disabled="blog.comment_count?false:true"
            >评论列表({{blog.comment_count}})</a>
          </li> -->
          <li>
            <router-link :to="'/user/'+getUid+'/publish?type=blog_edit&blog_id='+blog.id">编辑</router-link>
          </li>
          <li>
            <a href="#" @click="showConfirmModal(blog.id,blog.title)" style="color: #e74c3c">删除</a>
          </li>
        </template>
      </ListItem>
    </List>
  </div>
</template>

<script>
import { getBasicInfo } from "../../utils/mixin";
import _ from "lodash";

export default {
  mixins: [getBasicInfo],
  data() {
    return {
      blogList: []
    };
  },
  mounted() {
    this.fetchBlog();
  },
  watch: {
    $route: "fetchBlog"
  },
  methods: {
    fetchBlog() {
      this.axios
        .get(`/api/blog?type=craftsman&cid=${this.getCid}`)
        .then(res => {
          this.blogList = res.data;
        });
    },
    contentCut: text =>
      _.truncate(_.join(text.match(/[\u4e00-\u9fa5]/g), ""), { length: 45 }),
    showConfirmModal(id, title) {
      this.$Modal.confirm({
        title: "删除帖子",
        content: `您确定要删除帖子<strong>《${title}》</strong>吗？`,
        onOk: () => {
          this.axios.delete(`/api/blog/${id}`).then(res => {
            this.fetchBlog();
            this.$Message.success("删除成功");
          });
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.blog-management-wrapper {
  width: 80%;
  padding: 20px ;
}
</style>